<template>
  <div class="function-add-modal">
    <je-modal
      v-model:visible="isShow"
      width="460px"
      height="auto"
      :resize="false"
      :maximizable="false"
      title="模块添加"
      cancel-button
      :ok-button="onSubmit"
      @close="onCancel"
    >
      <je-form layout="vertical" :model="formState" :colon="false" autocomplete="off">
        <je-form-item label="名称" v-bind="validateInfos.FUNCINFO_FUNCNAME">
          <je-input v-model:value.trim="formState.FUNCINFO_FUNCNAME" placeholder=""> </je-input>
        </je-form-item>
        <je-form-item label="编码" v-bind="validateInfos.FUNCINFO_FUNCCODE">
          <je-input v-model:value.trim="formState.FUNCINFO_FUNCCODE" placeholder=""> </je-input>
        </je-form-item>
        <je-form-item label="描述">
          <je-textarea v-model:value="formState.FUNCINFO_FUNCREMARK" :rows="4" />
        </je-form-item>
      </je-form>
    </je-modal>
  </div>
</template>

<script>
  import { ref, defineComponent, reactive, toRaw } from 'vue';
  import { Input, Modal, Form } from '@jecloud/ui';
  import { AddChildFunction } from '../../../../api/index';
  import { formRules } from '../../../../helper/regular';
  const useForm = Form.useForm;
  export default defineComponent({
    name: 'Home',
    components: {
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeModal: Modal,
      JeTextarea: Input.TextArea,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      record: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeModal', 'refreshChildData'],
    setup(props, { emit }) {
      // 模块的弹窗是否展示
      const isShow = ref(props.visble);
      // 父组件传过来的node数据
      const recordData = ref(props.record);
      const formState = reactive({
        FUNCINFO_FUNCCODE: '', // 编码
        FUNCINFO_FUNCNAME: '', // 名称
        FUNCINFO_FUNCREMARK: '', //备注
      });
      const rulesRef = {
        ...formRules(),
      };
      const { validateInfos = {}, validate } = useForm(formState, rulesRef, {
        onValidate: (...args) => console.log(args),
      });
      //定义所有的方法
      const methods = {
        onSubmit({ button }) {
          button.loading = true;
          validate()
            .then(() => {
              const params = {
                FUNCINFO_FUNCCODE: formState.FUNCINFO_FUNCCODE,
                FUNCINFO_FUNCNAME: formState.FUNCINFO_FUNCNAME,
                FUNCINFO_FUNCREMARK: formState.FUNCINFO_FUNCREMARK,
                FUNCINFO_ICON: 'jeicon jeicon-function-module',
                FUNCINFO_NODEINFOTYPE: 'MODEL',
                FUNCINFO_FUNCTYPE: 'MODEL',
                SY_PARENT: recordData.value.JE_CORE_FUNCINFO_ID,
                SY_PATH: recordData.value.SY_PATH,
                SY_LAYER: parseInt(recordData.value.layer) + 1,
              };
              AddChildFunction(params)
                .then((res) => {
                  button.loading = false;
                  Modal.message(res.message, 'success');
                  methods.onCancel();
                })
                .catch((err) => {
                  button.loading = false;
                  Modal.alert(err.message, 'error');
                });
            })
            .catch((err) => {
              button.loading = false;
              console.log('err', err);
            });
          return false;
        },
        onCancel() {
          isShow.value = false;
          emit('changeModal', isShow.value);
        },
      };
      return {
        formState,
        ...methods,
        rulesRef,
        validateInfos,
        isShow,
      };
    },
  });
</script>
<style lang="less" scoped></style>
